<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="订单号">
                <a-input allowClear v-model="queryParam.order_no"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="商品名称">
                <a-input allowClear v-model="queryParam.goods_name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="手机号码">
                <a-input allowClear v-model="queryParam.mobile"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="收货昵称">
                <a-input allowClear v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item label="配送状态">
                <a-select v-model="queryParam.maiyatian_delivery_status">
                  <a-select-option v-for="(value, key) in delivery_status_list" :key="key">
                    {{ value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="订单状态">
                <a-select v-model="queryParam.maiyatian_order_status">
                  <a-select-option v-for="(value, key) in order_status_list" :key="key">
                    {{ value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="配送平台">
                <a-select v-model="queryParam.maiyatian_logistic_tag">
                  <a-select-option v-for="(value, key) in logistic_tag_list" :key="key">
                    {{ value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="起止时间">
                <a-range-picker v-model="queryParam.dateTime" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="onSearch(true)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <a-card :border="false">
      <STable ref="table" size="default" :columns="columns" :data="loadData">
        <div class="订单信息" slot="orderInfo" slot-scope="text, item">
          <div class="flex-y-center" style="margin-bottom: 20px">
            <div class="font-w-600">
              订单号：<span style="color: #1890ff; cursor: pointer" @click="copyText(item.order_no)">{{
                item.order_no
              }}</span>
            </div>
            <img
              :src="item.avatar"
              style="width: 20px; height: 20rpx; border-radius: 50%; margin-left: 10px"
              srcset=""
            />
            <div style="margin-left: 10px">{{ item.nickname }}</div>
          </div>
          <div
            v-for="(el, inx) in item.is_open ? item.goods_list : [item.goods_list ? item.goods_list[0] : {}]"
            :key="inx"
            class="flex"
          >
            <img
              :src="el.goods_pic || el.pic || 'https://cyy-desc.oss-cn-beijing.aliyuncs.com/sp210329_163447.png'"
              style="width: 48px; height: 48px; border-radius: 4px; margin-right: 16px; display: block"
            />
            <div style="padding: 0; width: 0; flex: 1">
              <a-tooltip>
                <template slot="title">
                  {{ el.name }}
                </template>
                <h4 class="over_e font-w-600">{{ el.name }}</h4>
              </a-tooltip>
              <a-tooltip v-if="item.order_type == 0">
                <template slot="title">
                  {{ el.attr_list ? el.attr_list.map((e) => e.attr_name).join() || '默认' : '默认' }}
                </template>
                <div class="over_e">
                  规格：{{ el.attr_list ? el.attr_list.map((e) => e.attr_name).join() || '默认' : '默认' }}
                </div>
              </a-tooltip>
              <a-tooltip v-if="el.food_ext_goods && el.food_ext_goods.length">
                <template slot="title">
                  {{ el.food_ext_goods ? el.food_ext_goods.map((e) => e.name + 'x' + e.num).join() : '' }}
                </template>
                <div class="over_e">
                  加料：{{ el.food_ext_goods ? el.food_ext_goods.map((e) => e.name + 'x' + e.num).join() : '' }}
                </div>
              </a-tooltip>
              <!-- <a-tooltip v-else-if="item.order_type == 1">
                  <div class="over_e">
                    预约时间：{{item.book.date}}
                  </div>
                </a-tooltip>
                <a-tooltip v-else>
                  <div class="over_e">
                    预约时间：{{item.book.date}}
                  </div>
                </a-tooltip> -->
            </div>

            <div style="margin-left: 10px">
              <div>小计：{{ el.total_price }}元</div>
              <div>数量：{{ el.num }}{{ el.unit }}</div>
            </div>
          </div>
        </div>

        <!-- 订单金额 -->
        <div slot="orderPrice" slot-scope="text, item">
          <div>
            <div>运费：{{ item.express_price }}元</div>
            <p style="margin-bottom: 0">
              <!-- <span>使用{{ item.integral.forehead_integral }}积分</span> -->
              <!-- &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; -->
              <!-- <span>优惠金额：{{ item.integral.forehead || 0 }}元</span> -->
              <span>优惠金额：{{ item.all_discount || 0 }}元</span>
            </p>
          </div>
          <div>应付款:{{ item.pay_price }}元</div>
          <div>实际支付:{{ item.pay_price }}元</div>
        </div>
        <!-- 下单收货人 -->
        <div slot="userInfo" slot-scope="text, item">
          <a-tooltip
            v-for="(el, inx) in item.is_open
              ? item.goods_list
                ? [item.goods_list[0]]
                : []
              : [item.goods_list ? item.goods_list[0] : {}]"
            :key="inx"
            overlayClassName="draw_overlay"
            :overlayStyle="{
              width: '250px',
              backgroundColor: '#fff',
            }"
          >
            <template slot="title">
              <div class="addressInfo">
                <div v-if="item.order_type === '1' && item.book_info && item.book_info.length">
                  <h3>入住人</h3>
                  <div v-for="(e, i) of item.book_info" :key="i">
                    <h4>姓名：{{ e.name }}</h4>
                    <h4>手机：{{ e.mobile }}</h4>
                    <h4>身份证：{{ e.idCard }}</h4>
                  </div>
                </div>
                <div v-else>
                  <h3>收货人</h3>
                  <h4>姓名：{{ item.user_name }}</h4>
                  <h4>手机：{{ item.mobile }}</h4>
                  <h4>地址：{{ item.user_address }}</h4>
                  <h4 v-if="item.order_type == 3">取餐码:{{ item.food_code }}</h4>
                </div>
              </div>
            </template>

            <div class="delivery_type">
              <span>{{ item.user_name }}</span>
              <span>{{ el.delivery_type == 0 ? '快递配送' : el.delivery_type == 1 ? '商店自提' : '同城配送' }}</span>
              <span v-if="item.order_type == 3 && item.food_book_ext && item.food_book_ext != ''">
                {{ JSON.parse(item.food_book_ext).time }}
              </span>
            </div>
          </a-tooltip>
        </div>

        <!-- 下单门店 -->
        <div slot="shop" slot-scope="text, item">
          <div v-if="item.md_info">
            <a-tooltip
              overlayClassName="draw_overlay"
              :overlayStyle="{
                width: '250px',
              }"
            >
              <template slot="title">
                <div class="addressInfo">
                  <div>
                    <h3>门店信息</h3>
                    <h4>名称：{{ item.md_info.name }}</h4>
                    <h4>地址：{{ item.md_info.address }}</h4>
                    <h4>联系电话：{{ item.md_info.mobile }}</h4>
                    <h4>营业状态：{{ mdTimeStatus(item.md_info) }}</h4>
                    <h4>营业时间：{{ mdTime(item.md_info) }}</h4>
                  </div>
                </div>
              </template>
              <div class="md_info">
                <span>{{ item.md_info.name }} {{ item.store == undefined ? '' : item.store.name }}</span>
                <span>{{ $moment(new Date(item.pay_time * 1000)).format('YYYY-MM-DD') }}</span>
              </div>
            </a-tooltip>
          </div>
          <div v-else class="md_info">
            <span>商城平台 {{ item.store == undefined ? '' : item.store.name }} </span>
            <span>{{ $moment(new Date(item.pay_time * 1000)).format('YYYY-MM-DD') }}</span>
          </div>
        </div>

        <!-- 订单状态 -->
        <span slot="orderStatus" slot-scope="text, item">
          <div>配送费用：{{ item.delivery.fee }}</div>
          <div>配送状态：{{ item.delivery.delivery_status_name }}</div>
          <div>订单状态：{{ item.delivery.order_status_name }}</div>
        </span>

        <div slot="cancelStatus" slot-scope="text, item">
          {{ item.delivery.refund_status_name }}
        </div>

        <!-- 操作 -->
        <div class="flex-col flex-y-center" slot="operation" slot-scope="text, item">
          <!-- <a-popconfirm title="确定申请退款?" ok-text="Yes" cancel-text="No" @confirm="onTuikuan(item)">
            <a href="#">申请退款</a>
          </a-popconfirm>
          <a-popconfirm
            title="确定取消?"
            ok-text="Yes"
            cancel-text="No"
            v-if="item.delivery.is_cancel == 0"
            @confirm="onCancel(item)"
          >
            <a href="#">取消</a>
          </a-popconfirm> -->

          <a-button @click="onTuikuan(item)" type="link">申请退款</a-button>
          <a-button v-if="item.delivery.is_cancel == 0"
            @click="onCancel(item)" type="link">取消</a-button>
          <span v-else>已取消</span>
        </div>
      </STable>

      <a-modal
        :title="formData.title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="visible = false"
      >
        <div class="">
          <div>备注：</div>
          <a-textarea v-model="formData.reason"></a-textarea>
        </div>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import mytApi from '@/api/maiyatian'
import STable from '@/components/Table'

const columns = [
  {
    title: '订单信息',
    scopedSlots: {
      customRender: 'orderInfo',
    },
  },
  {
    title: '订单金额',
    width: 200,
    scopedSlots: { customRender: 'orderPrice' },
  },
  {
    title: '买家/收货人',
    width: 150,
    scopedSlots: { customRender: 'userInfo' },
  },
  {
    title: '下单门店',
    width: 160,
    scopedSlots: { customRender: 'shop' },
  },
  {
    title: '状态',
    width: 150,
    scopedSlots: {
      customRender: 'orderStatus',
    },
  },
  {
    title: '退款状态',
    width: 150,
    scopedSlots: {
      customRender: 'cancelStatus',
    },
  },
  {
    title: '操作',
    width: 130,
    scopedSlots: {
      customRender: 'operation',
    },
  },
]

export default {
  components: {
    STable,
  },
  data() {
    return {
      columns,
      queryParam: {
        dateTime: [],
      },
      order_status_list: {}, //订单状态
      delivery_status_list: {}, //配送状态
      logistic_tag_list: {}, //配送平台
      // 加载数据方法 必须为 Promise 对象
      loadData: async (parameter) => {
        console.log(parameter)

        var formData = Object.assign(parameter, this.queryParam)
        if (this.queryParam.dateTime.length) {
          formData.dateStart = this.queryParam.dateTime[0]
          formData.dateEnd = this.queryParam.dateTime[1]
          delete formData.dateTime
        }

        const res = await mytApi.indexOrderList(formData)
        console.log(res.data, 'loadData1')
        Object.keys(this.order_status_list).length === 0 && (this.order_status_list = res.maiyatian.order_status_list)
        Object.keys(this.delivery_status_list).length === 0 &&
          (this.delivery_status_list = res.maiyatian.delivery_status_list)
        Object.keys(this.logistic_tag_list).length === 0 && (this.logistic_tag_list = res.maiyatian.logistic_tag_list)

        return res.data
      },
      visible: false,
      confirmLoading: false,
      formData: {
        order_id: '',
        reason: '',
      },
    }
  },
  created() {},
  methods: {
    onSearch(type = false) {
      this.$refs.table.refresh(type)
    },
    copyText(text) {
      // 创建一个临时的textarea元素
      var tempTextArea = document.createElement('textarea')
      // 将要复制的文本设置为textarea的value值
      tempTextArea.value = text
      // 将textarea添加到DOM树中
      document.body.appendChild(tempTextArea)
      // 选中textarea中的文本
      tempTextArea.select()
      // 执行复制命令
      document.execCommand('copy')
      // 删除临时的textarea元素
      document.body.removeChild(tempTextArea)
      this.$message.success('复制成功')
    },
    async onTuikuan(item) {
      this.formData = {
        order_id: item.id,
        type: 1,
        title: '申请退款？',
      }
      this.visible = true
    },
    async onCancel(item) {
      this.formData = {
        order_id: item.id,
        title: '取消？',
      }
      this.visible = true
    },
    async handleOk() {
      this.confirmLoading = true
      let formData = JSON.parse(JSON.stringify(this.formData))
      let title = formData.title
      delete formData.title

      if (title == '申请退款？') {
        var res = await mytApi.orderApplyRefund(formData)
      } else {
        var res = await mytApi.indexorderCanceled(formData)
      }
      this.onSearch()
      this.visible = false
      this.confirmLoading = false
      this.$message.success('申请成功')
    },
  },
}
</script>
<style>
.draw_overlay .ant-tooltip-inner {
  color: #333 !important;
  background-color: #fff !important;
}
.draw_overlay .ant-tooltip-arrow::before {
  background-color: #fff;
}
</style>

<style lang="scss" scoped>
.user-head {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}

.over_e {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 买家收货人
.delivery_type {
  display: flex;
  flex-direction: column;
  font-size: 14px;

  color: rgba(0, 0, 0, 0.85);
  margin: 5px 0;
}
.addressInfo {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #fff;

  h3 {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    color: rgba(0, 0, 0, 0.85);
  }

  h4 {
    color: rgba(0, 0, 0, 0.65);
  }
}

// 下单门店
.md_info {
  display: flex;
  flex-direction: column;
  font-size: 14px;

  color: rgba(0, 0, 0, 0.85);
  span {
    margin: 5px 0;
  }
}
</style>
